/**
 * Created by chenhui.cch on 2016/8/8.
 */

staticData = {
    wordWidth: 12,
    wordSpacing: 4
};
config = {
    rows: 100, // 行数,可自动拓展
    cols: 60, // 列数
    showWords: '我是来测试 16年', // 展示的文字
    wordsPerLine: 3, // 每行的字数 TODO 貌似可计算
    wordStrLength: staticData.wordWidth * staticData.wordWidth, // 每个单词01字符串长度
    wordsTotalWidth: staticData.wordSpacing * 2 + staticData.wordWidth, // 每个词加空白所占宽度、高度
};

/**
 * 设置对应位置颜色
 * @param i
 * @param j
 * @param color
 */
setColor = function (i, j, color) {
    // console.log(i + ' ' + j + '\n');
    var id = '#box-' + i + '-' + j;

    // var random = (i + j) % 3;
    var random = parseInt(Math.random() * 3);
    $(id).addClass('color' + random);

    // if (random < 1) {
    //     $(id).addClass('cyan');
    // } else if (random < 2) {
    //     $(id).addClass('magenta');
    // } else {
    //     $(id).addClass('yellow');
    // }
    $(id).removeClass('not-selected');
}

// 根据传入01绘制图像
drawArea = function (str) {
    var r, c;
    var wordsCount = parseInt(str.length / config.wordStrLength); // 字数
    var rows = parseInt((wordsCount - 1) / config.wordsPerLine) + 1; // 字需要的行数
    for (r = 0; r < rows; r++) {
        var startR = config.wordsTotalWidth * r + staticData.wordSpacing;
        for (c = 0; c < config.wordsPerLine; c++) {
            var startStr = (r * config.wordsPerLine + c) * config.wordStrLength; // 处理到的字符
            var startC = c * config.wordsTotalWidth + staticData.wordSpacing;
            drawWord(startR, startC, str.substr(startStr, config.wordStrLength));
        }
    }
}

/**
 * 根据传入的二进制str绘制单个字
 * @param startR
 * @param startC
 * @param str
 */
drawWord = function (startR, startC, str) {
    var i;
    for (i = 0; i < str.length; i++) {
        if (str[i] === '1') {
            // var func = function(startR, startC, i){
            //     return function () {
            //         return setColor(startR + parseInt(i / staticData.wordWidth), startC + i % staticData.wordWidth);
            //     };
            // }
            // setTimeout(func(startR, startC, i), 0);
            setColor(startR + parseInt(i / staticData.wordWidth), startC + i % staticData.wordWidth);
        }
    }
}

/**
 * 绘制方格个数
 * @param rowNum
 * @param colNum
 */
drawBox = function (rowNum, colNum) {
    console.log('col:' + colNum);
    var i, j;
    for (i = 0; i < rowNum; i++) {
        row = document.createElement('div');
        row.className = "row";
        row.innerHTML = '';

        for (j = i % 2; j < colNum; j++) {
            row.innerHTML += '<div class="box" id="box-' + i + "-" + j + '"></div>';
        }

        $('#main-area').append(row);
    }
}


$(document).ready(function () {

    var colorClass = '';

    // 获取字符数据
    $.ajax({
        url: 'Cn2DotsTable.php?str=' + config.showWords,
        dataType: 'text',
        async: false,
        success: function (res) {
            drawBox(parseInt((res.length / config.wordStrLength - 1) / config.wordsPerLine + 1) * config.wordsTotalWidth, config.cols);
            drawArea(res);
            setTimeout(
                function () {
                    setInterval(function () {
                        $('.box.color0').toggleClass('blink');
                    }, 450)
                }, 0
            );
            setTimeout(
                function () {
                    setInterval(function () {
                        $('.box.color1').toggleClass('blink');
                    }, 450)
                }, 150
            );
            setTimeout(
                function () {
                    setInterval(function () {
                        $('.box.color2').toggleClass('blink');
                    }, 450)
                }, 300
            );
        }
    });
});
